import React, { useState } from 'react';
import { Space, Input } from 'antd';
import { PlusCircleFilled, SearchOutlined } from '@ant-design/icons';

interface PropsType {
  collapsed?: boolean;
}

const Index: React.FC<PropsType> = (props) => {
  const [keyWord, setKeyWord] = useState('');
  const { collapsed } = props;
  return (
    <div>
      {!collapsed ? (
        <Space
          style={{
            marginBlockStart: 16,
          }}
          align="center"
        >
          <Input
            style={{
              borderRadius: 4,
              backgroundColor: 'rgba(0,0,0,0.03)',
            }}
            prefix={
              <SearchOutlined
                style={{
                  color: 'rgba(0, 0, 0, 0.15)',
                }}
              />
            }
            placeholder="搜索方案"
            bordered={false}
            onPressEnter={(e) => {
              setKeyWord((e.target as HTMLInputElement).value);
            }}
          />
          <PlusCircleFilled
            style={{
              color: 'var(--ant-primary-color)',
              fontSize: 24,
            }}
          />
        </Space>
      ) : null}
    </div>
  );
};

export default Index;
